﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Project 1</title>
	<script src="js/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="js/jquery.datetimepicker.js"></script>
	<script>
		jQuery.fn.multiselect = function() {
			$(this).each(function() {
				var checkboxes = $(this).find("input:checkbox");
				checkboxes.each(function() {
					var checkbox = $(this);
					// Highlight pre-selected checkboxes
					if (checkbox.prop("checked"))
						checkbox.parent().addClass("multiselect-on");
		 
					// Highlight checkboxes that the user selects
					checkbox.click(function() {
						if (checkbox.prop("checked"))
							checkbox.parent().addClass("multiselect-on");
						else
							checkbox.parent().removeClass("multiselect-on");
					});
				});
			});
		};
		$(document).ready(function(){
			$(".multiselect").multiselect();
		});
		$(document).ready(function(){
			$('#datestart').datetimepicker();
			$('#btnVon').click(function(){
				$('#datestart').datetimepicker('show');
			});
			$('#dateend').datetimepicker();
			$('#btnBis').click(function(){
				$('#dateend').datetimepicker('show');
			});

		});
			
</script>
	<meta name="viewport" content="width=100%, user-scalable=yes" >
	<link href="css/style.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="css/jquery.datetimepicker.css"/>
</head>
<body>
	<div id="wrapper-control">
		<div id="wrapper-icon">
			<ul>
				<li>
					<a href="#" id="icon-execFilter">
						<img src="img/icon/1.jpg" title="Exec Filter"/>
					</a>
				</li>
				<li>
					<a href="javascript:save_filter();" id="icon-saveFilter">
						<img src="img/icon/2.jpg" title="Save filter"/>
					</a>
				</li>
				<li>
					<a href="javascript:reset_filter();" id="icon-resetFilter">
						<img src="img/icon/3.jpg" title="Reset filter"/>
					</a>
				</li>
				<li>
					<a href="javascript:export_data();" id="icon-export">
						<img src="img/icon/4.jpg" title="Export"/>
					</a>
				</li>
				<li>
					<a href="#" id="icon-printScreen">
						<img src="img/icon/5.jpg" title="Print"/>
					</a>
				</li>
				<li>
					<a href="#" id="icon-exitScreen">
						<img src="img/icon/6.jpg" title="Exit"/>
					</a>
				</li>
                <li>
                	<input id="btnhide" type="button" value="Hidden" class="btn" onClick="javascript:hide_filter();"/>
                    <input id="btnshow" type="button" value="Show" class="btn" onClick="javascript:show_filter();" style="display:none"/>
                </li>
			</ul>
		</div>
	</div>
	
	<div id="wrapper-filter">
		<form id="f-filter">
			<fieldset id="f-zei">
				<legend>Zeitraum</legend>
				<table border="0" cellpadding="1" cellspacing="0" height="40px" width="100%">
					<tr>
						<td>
							<input id="btnVon" type="button" value="Von" class="btn"/>
							<input id="btnBis" type="button" value="Bis" class="btn" />
						</td>
						<td>
							<input type="text" class="text" id="datestart"/>
							<input type="text" class="text" id="dateend"/>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<input id="btnHeute" type="button" value="Heute" class="btn"/>
							<input id="btnGestern" type="button" value="Gestern" class="btn"/>
							<input id="btnTage" type="button" value="7 Tage" class="btn"/>
						</td>
					</tr>
				</table>
			</fieldset>
			
			<fieldset id="f-quellen">
				<legend>Datenquellen</legend>
				<select name="datenque" id="datenque" multiple style="height:60px;width:100%">
					<option value="volvo">Volvo</option>
					<option value="saab">Saab</option>
					<option value="opel">Opel</option>
					<option value="audi">Audi</option>
 				</select>
			</fieldset>
			
			<fieldset id="f-typ">
				<legend>Datentpunkt typ</legend>
				<div class="multiselect">
					<label><input type="checkbox" class="datepun" name="datepun[]" value="Green" />Green</label>
					<label><input type="checkbox" class="datepun" name="datepun[]" value="Red" />Red</label>
					<label><input type="checkbox" class="datepun" name="datepun[]" value="Blue" />Blue</label>
					<label><input type="checkbox" class="datepun" name="datepun[]" value="Orange" />Orange</label>
					<label><input type="checkbox" class="datepun" name="datepun[]" value="Purple" />Purple</label>
					<label><input type="checkbox" class="datepun" name="datepun[]" value="Black" />Black</label>
					<label><input type="checkbox" class="datepun" name="datepun[]" value="White" />White</label>
				</div>
			</fieldset>
			
			<fieldset id="f-priori">
				<legend>Priorität</legend>
				<div class="multiselect">
					<label><input type="checkbox" class="priority" name="priority[]" value="1" />Green</label>
					<label><input type="checkbox" class="priority" name="priority[]" value="2" />Red</label>
					<label><input type="checkbox" class="priority" name="priority[]" value="3" />Blue</label>
					<label><input type="checkbox" class="priority" name="priority[]" value="4" />Orange</label>
					<label><input type="checkbox" class="priority" name="priority[]" value="5" />Purple</label>
					<label><input type="checkbox" class="priority" name="priority[]" value="6" />Black</label>
					<label><input type="checkbox" class="priority" name="priority[]" value="7" />White</label>
				</div>
			</fieldset>
			
			<fieldset id="f-text" >
				<legend>Text Filter</legend>
				<div id="search_section" style="height:62px;position:relative;">
				<input class="f_Radio" type="radio" name="ft_radio" value="aks"/>AKS
				<input class="f_Radio" type="radio" name="ft_radio" value="beschreibung"/>Beschreibung<br>
				<textarea name="ftext" id="ftext" style="width:100%;height:40px"></textarea>
				</div>
			</fieldset>
		</form>
	</div>
	
	<!--div class="row"></div-->
	<div id="wrapper-data">
	</div>
</body>

<script type="text/javascript">

	function hide_filter(){
		$('#wrapper-filter').hide();
		$('#btnhide').hide();
		$('#btnshow').show();
	}
	
	function show_filter(){
		$('#wrapper-filter').show();
		$('#btnhide').show();
		$('#btnshow').hide();
	}
	
	function reset_filter(){
		$("#wrapper-data").html("");
	}
	
	function export_data(){
		$("#wrapper-data").html("Export data here:");
	}
		
	function save_filter(){
		var final_datepun = ''; 
		var i=0;
	 	$('.datepun:checked').each(function(){
			// alert($(this).val());
			i++;
			var values = $(this).val();
			final_datepun += "Value "+i+" : "+values+"</br>";
		});		//return false;
		//alert(final);
		var final_priority = '';
	 	$('.priority:checked').each(function(){
			// alert($(this).val());
			i++
			var values = $(this).val();
			final_priority += "Value "+i+" : "+values+"</br>";
		});
		var final_Radio='';
		$('.f_Radio:checked').each(function(){
			// alert($(this).val());
			var values = $(this).val();
		final_Radio += "Value : "+values+"</br>";
		});
		alert($(".f_Radio:checked").val());
		$.get("./index.html",{
			datenque:$("#datenque").val(),
			datepun:final_datepun,
			priority:final_priority,
			f_Radio:final_Radio,
			ftext:$("#ftext").val()
			//pdate:postdate,
			//n:vnlink,
			//cate_code:$("#categories").val(),
		},
		function(data,status){
			//alert("Lấy nội dung"+data);
			//$("#wrapper-data").html("");
			$("#wrapper-data").html('<font color="#E43407"><b>'+$("#datenque").val()+'</br>'+final_datepun+'</br>'+final_priority+
																					 final_Radio+$("#ftext").val()+'</b></font>');
			//$("#wrapper-data").html('<font color="#E43407"><b>Filter was saved...</b></font>').fadeIn(3000, function(){
				//$(this).fadeOut(5000);         
			//});
		});
		
	//alert($("#categories").val());
	}
</script>
</html>
